<template>
  <el-card v-if="showDialog">
    <h3>查询事件结果</h3>
    <a href="#" class="close" @click.prevent="showDialog = false">×</a>
    <el-table v-if="allData" :data="currentData" :border="true" style="width: 100%">
      <el-table-column prop="事件编号" label="事件编号" width="160" />
      <el-table-column prop="事件等级" label="事件等级" width="90" />
      <el-table-column prop="发生时间" label="发生时间" width="140" />
      <el-table-column prop="发生地点" label="发生地点" />
      <el-table-column prop="驾驶员" label="驾驶员" width="90" />
      <el-table-column prop="车牌号" label="车牌号" width="120" />
      <el-table-column prop="处理状态" label="处理状态" width="90">
        <template #default="scope">
          <el-tag v-if="scope.row.处理状态 == 0" type="danger">未处理</el-tag>
          <el-tag v-else-if="scope.row.处理状态 == 1" type="warning">处理中</el-tag>
          <el-tag v-else type="success">已处理</el-tag>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      small
      background
      layout="prev, pager, next"
      :page-size="5"
      :default-page-size="5"
      :total="allData.length"
      class="mt-4"
      v-model:current-page="currentPage"
      @current-change="changeData"
    />
  </el-card>
</template>

<script setup>
import { showDialog, queryResult } from '../Hooks/useSearchByDraw'
// const props = defineProps(['data'])
// let data = ref(null)
// 分页的逻辑
let allData = ref([])
let currentData = ref([])
watch(
  () => queryResult.value,
  () => {
    if (queryResult.value) {
      // data.value = props.data.map((item) => item.values_.values_)
      allData.value = queryResult.value
      currentData.value = allData.value.slice(0, 5)
    }
  }
)
// 当前页面改变的处理
let currentPage = ref(1)
function changeData() {
  currentData.value = allData.value.slice(
    (currentPage.value - 1) * 5,
    (currentPage.value - 1) * 5 + 5
  )
}
// 给父组件传参
const emit = defineEmits(['changeShow'])
// 重新打开页面，返回第一页
watch(
  () => showDialog.value,
  () => {
    currentPage.value = 1
    emit('changeShow', showDialog.value)
  }
)

// 卸载组件时，清空数据
onBeforeUnmount(() => {
  allData.value = []
  currentData.value = []
})
</script>

<style lang="less" scoped>
.el-card {
  position: absolute;
  top: 150px;
  left: 50%;
  margin-left: -500px;
  width: 1000px;
  max-height: 400px;
  z-index: 3;
  text-align: center;
  h3 {
    margin-bottom: 15px;
  }
  .close {
    position: absolute;
    right: 10px;
    top: 5px;
    text-decoration: none;
    color: #000;
    font-size: 30px;
    &:hover {
      color: red;
    }
  }
  .el-pagination {
    margin: 20px 0;
  }
}
</style>
